/* eslint-disable @typescript-eslint/no-unused-vars */
import Icon from '@/components/Icon'
import useInitialState from '@/hooks/useInitialState'
import { getUser } from '@/store/actions/Profile'
import { NavBar, Input, List } from 'antd-mobile'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'

const Chat = () => {
    const history = useHistory()
    const [messageList, setmessage] = useState<
        {
            type: 'robot' | 'user'
            text: string
        }[]
    >([
        { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
        { type: 'user', text: '你好' }
    ])
    const {user} =useInitialState(getUser,'Profile')
    return (
        <div className={styles.root}>
            {/* 顶部导航栏 */}
            <NavBar className="fixed-header" onBack={() => history.go(-1)}>
                小智同学
            </NavBar>

            {/* 聊天记录列表 */}
        <div className="chat-list">
        {messageList.map(item => {
        return item.type === 'robot' ? 
            <div className="chat-item"  key={item.type}>
              <Icon type="iconbtn_xiaozhitongxue" />
              <div className="message">
                {item.text}
              </div>
            </div>: 
            <div className="chat-item user" key={item.type}>
            <img src={user.photo} alt="" />
            <div className="message"> {item.text}</div>
           </div>
          })}
       </div>
      {/* 底部消息输入框 */ }
    <div className="input-footer">
        <List.Item
            className="login-code-extra"
            extra={<span className="code-extra">发送</span>}>
            <Input className="no-border" placeholder="请描述您的问题" />
        </List.Item>
        <Icon type="iconbianji" />
    </div>
    </div >  
  )
}

export default Chat